import { getImageUrl } from '@/shared/lib/images';
import Image from 'next/image';

import cs from './SpeakerCard.module.scss';

export const SpeakerCard = ({ name, image, description }: { name: string; image: string; description: string }) => (
  <div className={cs.speaker}>
    {image && (
      <div className={cs.logo}>
        <Image
          alt={name}
          fill
          sizes="(max-width: 768px) 30vw, (max-width: 1024px) 25vw, (max-width: 1366px) 20vw, 20vw"
          src={getImageUrl(image)}
        />
      </div>
    )}
    <div className={cs.info}>
      <div className={cs.name}>{name}</div>
      <div className={cs.description}>{description}</div>
    </div>
  </div>
);
